<template>
	<ScorllRefresher @refresh="refresh" @tolower="tolower">
		<view v-for="item of list" :key="item.id" class="item" @click.stop="tapToOrderDetail(item)">
			<view class="item__header">
				<image class="item__header__portrait" :src="item.lawFirmLogo"></image>
				<view class="item__header__name">{{item.lawFirmName}}</view>
				<view class="item__header__status" :class="'item__header__status--'+item.orderStatus">
					{{orderStatusFormat(item.orderStatus)}}
				</view>
			</view>
			<view class="item__middle">
				<view class="item__middle__main">{{item.serviceType}}</view>
				<view class="item__middle__desc">下单时间：{{item.orderTime}}</view>
				<view class="item__middle__desc">实付金额：{{pennyToDollarFormat(item.amount)}}</view>
				<template v-if="item.review == '1'">
					<view class="item__middle__desc">评价时间：{{item.reviewTime}}</view>
					<view class="item__middle__desc">综合评价：
						<u-rate inactive-color="#D9D9D9" active-color="#FF710A" :count="5" :current="item.overallRating"
							disabled></u-rate>
					</view>
				</template>
			</view>
			<view class="item__footer">
				<view v-for="(tag,index) of item.reviewTagList" :key="index" class="tag">{{tag}}</view>
				<view class="iflex jcfe fill">
					<view class="flex yingfu">金额：{{pennyToDollarFormat(item.amount)}}</view>
					<u-button v-if="item.orderStatus == 'Completed' &&  item.review == '0'" type="primary"
						style="width:144rpx; margin-top: 26rpx;" :customSylte="{width:'144rpx'}"
						@click.stop="tapToAppraise(item)">去评价</u-button>
					<u-button v-if="item.orderStatus == 'Processing'" type="primary"
						style="width:144rpx; margin-top: 26rpx;" :customSylte="{width:'144rpx'}"
						@click.stop="tapCompleted(item)">完成订单</u-button>
				</view>
			</view>
		</view>
	</ScorllRefresher>
</template>

<script setup lang="ts">
	import ScorllRefresher from '@/components/scroll-refresher/scroll-refresher.vue';
	import type { AnyObj } from '@/types/global';
	import { defineProps, withDefaults, ref, onMounted } from 'vue';
	import { useGetDataPaging } from '@/hooks/paging';
	import { getOrderList, complatedOrder } from '@/apis/trade';
	import { pennyToDollarFormat, orderStatusFormat } from '@/utils/format';
	import { isEmpty } from '@/utils/util';

	const props = withDefaults(defineProps<{
		status ?: string;
	}>(), {
		status: ''
	});

	const { list, refresh, tolower } = useGetDataPaging({
		api: getOrderList,
		handlerData: (rows) => {
			for (const item of rows) {
				item.reviewTagList = isEmpty(item.reviewTag) ? [] : item.reviewTag.split(',');
			}
		},
		params: () => {
			if (props.status === 'Paid' || props.status === 'Completed') {
				return { orderStatus: props.status }
			}

			if (props.status === 'Review') {
				return { review: 0 }
			}
			return {}
		}
	});


	onMounted(() => {
		refresh();
	});

	function tapCompleted(item : AnyObj) {
		uni.showModal({
			content: '确认完成此订单吗？',
			confirmColor: '#FF710A',
			success: function (res) {
				if (!res.confirm) return;
				complatedOrder(item.orderId).then((res) => {
					if (res.code !== 200) {
						uni.showToast({
							icon: 'none',
							title: res.msg ?? '服务器忙，请稍后再试'
						})
						return;
					}
					tapToOrderDetail(item);
				});
			}
		})
	}

	function tapToAppraise(item : AnyObj) {
		uni.navigateTo({
			url: `/pages-mine/appraise/appraise?orderId=${item.orderId}`
		});
	}
	function tapToOrderDetail(item : AnyObj) {
		uni.navigateTo({
			url: `/pages-mine/order-detail/order-detail?orderId=${item.orderId}`
		});
	}
</script>

<style lang="scss" scoped>
	.item {
		display: inline-flex;
		flex-direction: column;
		margin-left: 30rpx;
		width: 690rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 12rpx;

		&+& {
			margin-top: 24rpx;
		}

		&__header {
			display: inline-flex;
			align-items: center;
			width: 100%;
			padding: 2rpx 0 18rpx 0;
			box-sizing: border-box;
			border-bottom: 1px solid #E6E5E5;

			&__portrait {
				display: inline-flex;
				flex-shrink: 0;
				width: 52rpx;
				height: 52rpx;
				border-radius: 50%;
			}

			&__name {
				display: flex;
				flex: 1;
				padding: 0 20rpx;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 30rpx;
				color: #000000;
			}

			&__status {
				display: inline-flex;
				flex-shrink: 0;
				font-weight: 500;
				font-size: 28rpx;

				&--Paid {
					color: #3CA961;
				}

				&--Completed {
					color: $uni-primary;
				}
			}
		}

		&__middle {
			display: inline-flex;
			flex-direction: column;
			width: 100%;
			padding-bottom: 30rpx;
			box-sizing: border-box;
			border-bottom: 1px solid #E6E5E5;

			&__main {
				display: inline-flex;
				width: 100%;
				padding: 30rpx 0 18rpx 0;
				box-sizing: border-box;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 38rpx;
			}

			&__desc {
				display: inline-flex;
				width: 100%;
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #929292;
				line-height: 33rpx;
			}
		}


		&__footer {
			display: inline-flex;
			flex-wrap: wrap;
			width: 100%;
			padding: 0 0 12rpx 0;
			box-sizing: border-box;

			.tag {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				margin-top: 26rpx;
				width: 167rpx;
				height: 56rpx;
				border-radius: 56rpx;
				font-weight: 400;
				font-size: 24rpx;
				background: #FFF8F4;
				color: #FF710A;

				&+&,
				&+.tag {
					margin-left: 28rpx;
				}

				&:nth-child(3n+1) {
					background: #FFF8F4;
					color: #FF710A;
				}

				&:nth-child(3n+2) {
					background: #F7FAFF;
					color: #3176B6;
				}

				&:nth-child(3n+3) {
					background: #F4FAF5;
					color: #61A488;
				}

				// &--orange {
				// 	background: #FFF8F4;
				// 	color: #FF710A;
				// }


				// &--blue {
				// 	background: #F7FAFF;
				// 	color: #3176B6;
				// }

				// &--green {
				// 	background: #F4FAF5;
				// 	color: #61A488;
				// }
			}

			.yingfu {
				padding: 30rpx 0 0 0;
				color: #000000;
				font-family: "PingFang SC";
				font-size: 30rpx;
				font-weight: 500;
			}
		}
	}
</style>